<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态改变下拉菜单内容</title>
</head>
<script type="text/javascript">
    //定义一个二维数组 aCity ,用于存放城市名称。
    var aCity = [];
    aCity[0] = [];
    aCity[1] = [];
    aCity[2] = [];
    aCity[3] = [];
    //赋值，每个省份的城市存放在数组的一行
    aCity[0][0] = "--请选择--";
    aCity[1][0] = "--请选择--";
    aCity[1][1] = "广州市";
    aCity[1][2] = "深圳市";
    aCity[1][3] = "珠海市";
    aCity[1][4] = "汕头市";
    aCity[1][5] = "佛山市";
    aCity[2][0] = "--请选择--";
    aCity[2][1] = "长沙市";
    aCity[2][2] = "株洲市";
    aCity[2][3] = "湘潭市";
    aCity[3][0] = "--请选择--";
    aCity[3][1] = "杭州市";
    aCity[3][2] = "宁波市";
    aCity[3][3] = "温州市";
    function ChangeCity() {
        var i,iProvinceIndex;
        iProvinceIndex = document.frm.optProvince.selectedIndex;
        console.log(iProvinceIndex);
        iCityCount = 0;
        while(aCity[iProvinceIndex][iCityCount]!=null) {
            iCityCount++;
        }
        //计算选定省份的城市个数
        document.frm.optCity.length = iCityCount;//改变下拉菜单的选项数
        for(i = 0 ;i<iCityCount;i++)
            document.frm.optCity[i] = new Option(aCity[iProvinceIndex][i]);
        document.frm.optCity.focus();
    }


</script>
<body onfocus="ChangeCity()">
<h3>选择省份及城市</h3>

<form name="frm">
    <p>
        省份：
        <select name="optProvince" size="1" onchange="ChangeCity()">
            <option>--请选择--</option>
            <option>广东省</option>
            <option>湖南省</option>
            <option>浙江省</option>
        </select>
    </p>
    <p>
        省份：
        <select name="optCity" size="1">
            <option>--请选择--</option>
        </select>
    </p>
</form>


</body>
</html>